<template>
    <div class="user-bind-card-list">
        <template v-if='pageLoaded'>
            <div class="card bank-card" v-for='(item,index) in list'>
                <img class='bind-card-logo' :src="item.logoUrl">
                <div class="bind-card-info">
                    <p class="name">{{item.bankName || placeholder}}</p>
                    <p class="number">{{item.cardNo | cardSpace}}</p>
                    <p class="tips">{{item.limitPerStr || placeholder}}</p>
                </div>
                <span class="button short pure switch-card" @click='setUnbind(item,index)' v-if='list.length > 1'>解除绑定</span>
                <span class="button short pure switch-card" @click='unbundlingBankcard(item)' v-if='list.length == 1'>我要换卡</span>
            </div>

            <div class="add-card"><div class="button long" @click='goAddCard'>添加银行卡</div></div>

            <div class="support">
                <span class="button auto pure--black" @click='show_bank_list = true'>查看支持银行></span>
            </div>

            <div class="bind-card-tips">
                <p class='font-caption'>提示：为保障资金安全，资金采用同卡进出，钱包余额、出借或借款有资金的情况下，不支持解绑或换卡。</p>
            </div>

            <contact></contact>
        </template>

        <modal
            :show='show_bank_list'
            view
            @close='show_bank_list = false'>
            <ul class='modal-bank__list' v-if='limitDescription.length'>
                <li class='modal-bank__item head'>
                    <span>银行</span>
                    <span>单笔限额</span>
                    <span>单日限额</span>
                    <span>单月限额</span>
                </li>
                <li class='modal-bank__item' v-for='item in limitDescription'>
                    <span>{{item.bankName}}</span>
                    <span>{{item.singleLimit}}</span>
                    <span>{{item.oneDayLimit}}</span>
                    <span>{{item.monthlyLimit}}</span>
                </li>
            </ul>
        </modal>

        <confirm 
            :show='show_modal_unbind'
            @close='show_modal_unbind = false'
            @confirm='smsShow'
            title='解除绑定'
            tips='是否解除银行卡绑定？'></confirm>

        <pay-password
            :show='showPayPassword'
            @close='showPayPassword=false'
            @finish='payFinish'></pay-password>

        <sms-code
            v-if='userInfo.user'
            :show='showSmsCode'
            :mobile='userInfo.user.mobile'
            @close='showSmsCode=false'
            @finish='smsFinish'></sms-code>

    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import contact from '../components/Contact.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import checkBox from '../components/CheckBox.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import payPassword from '../components/PayPassword.vue'
    import smsCode from '../components/SmsCode.vue'
    import toYuan from '../filters/filter-toYuan'
    import  { mapGetters, mapActions }  from 'vuex'
    import { addLenderValidation, resetAccountPasswordValidation, operatorEditValidation } from '../validation/validation'
    import { allApi, userApi, bankcardApi } from '../api/api'
    import moment from 'moment'

    export default {
        components:{
            footerBar,
            smsCode,
            selectGroup,
            selectOption,
            radioGroup,
            radio,
            checkBox,
            areaSelect,
            loading,
            toolTip,
            modal,
            confirm,
            contact,
            buttonLoading,
            pagination,
            payPassword
        },
        filters:{
            toYuan,
            cardSpace(card){
                return card.replace(/\s/g, '').replace(/(\d{4})(?=\d)/g, "$1 ")
            }
        },
        data() {
            return {
                showPayPassword:false,
                showSmsCode:false,
                pageLoaded:false,
                password:'',
                smsCode:'',
                show_bank_list:false,
                show_modal_unbind:false,
                payPasswordShow:false,
                showSmsCode:false,
                payStatus:'',
                password:'',
                placeholder:'--',
                userCount:'',
                list:[],
                listInfo:{},
                curItem:{},
                curIndex:'',
                limitDescription:[],
                loading:true,
                loading_count:true,
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            userInfo(){
                return this.localInfo.userInfo
            },
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'setUserInfo'
            ]),

            // function
            goAddCard(){
                this.$router.push({
                    name:'user-add-card'
                })
            },
            setUnbind(item,index){
                this.curItem = item
                this.curIndex = index
                this.show_modal_unbind = true
            },
            getList(){
                bankcardApi.list()
                .then(result=>{
                    this.pageLoaded = true
                    this.list = result
                })
                .catch(error => {
                    this.pageLoaded = true
                    console.error(error)
                })
            },
            payFinish(password){
                this.password = password
                this.showPayPassword = false
                this.showSmsCode = true
            },
            smsFinish(smsCode){
                this.smsCode = smsCode
                this.showSmsCode = false
                this.unbind()
            },
            smsShow(){
                this.show_modal_unbind = false
                this.showSmsCode = true
            },
            unbind(){
                this.showLoading()
                bankcardApi.unbind({
                    cardNo:this.curItem.cardNo,
                    smsCode:this.smsCode
                })
                .then(result=>{
                    this.setMsgTip({
                        text:'银行卡解绑成功',
                        type:'success'
                    })
                    console.log(this.curIndex)
                    this.list.splice(this.curIndex,1)
                    this.hideLoading()
                })
                .catch(error => {
                    this.hideLoading()
                    console.error(error)
                })

            },
            unbundlingBankcard(item){
                this.$router.push({
                    name:'user-add-card',
                    query:{
                        oldcard:item.cardNo
                    }
                })
            },
            getLimitDescription(){
                userApi.limitDescription()
                .then(result=>{
                    this.limitDescription = result
                })
                .catch(error => {
                    console.error(error)
                })
            },
        },
        created(){
            this.getLimitDescription()
            this.getList()
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .user-bind-card-list{
        .card{
            display: flex;
            margin-top: 16px;
            &.bank-card{
                align-items: flex-start;
                position: relative;
                .switch-card{
                    position: absolute;
                    right:0;
                    top:12px;
                }
            }
        }
        .add-card{
            padding:14px 22px;
        }
        .bind-card-logo{
            width: 48px;
            margin-right: 16px;
            margin-left: -8px;
        }
        .bind-card-info{
            flex:1;
            color:$importColor;
            @extend %font-subhead;
            .name{
                padding-bottom: 8px;
            }
            .number{
                padding-bottom: 8px;
            }
            .tips{
                @extend %font-caption;
                padding-top: 8px;
                border-top:1px solid $sectionColor;
            }
        }
        .support{
            display: flex;
            justify-content: flex-end;
            padding:0 8px 14px 8px;
        }
        .bind-card-tips{
            padding: 0 24px 14px 24px;
            .font-subhead{
                color:$importColor;
                padding-bottom: 8px;
            }
        }
        .service{
            text-align: center;
            padding: 32px 24px;
            .contact{
                @extend %font-body2;
                padding: 8px 0;
            }
            .time{
                @extend %font-caption;
                border-top:1px solid $sectionColor;
                padding: 8px 0;
            }
        }
        .modal-bank__list{
        }
        .modal-bank__item{
            &.head{
                font-weight: normal;
            }
            @extend %font-caption;
            color:$importColor;
            overflow:hidden;
            span{
                &:first-child{
                    width: 40%;
                }
                width: 20%;
                padding:3px;
                box-sizing: border-box;
                float:left;
            }
        }
    }
</style>
